<template>
<div class="bh-tabs">
	<div class="bh-tabs__header">
		<div class="bh-tabs__item" v-for="item in tabpanes" :key='item.label' :class="{'is-active':actived == item.name}" @click='handleClick(item)'>
			<div class="bh-tabs__item__ms">{{item.label}}</div>
		</div>
	</div>
	<div class="el-tabs__content">
		<slot></slot>
	</div>
</div>
</template>

<script>
export default {
	name: 'bh-tabs',
	provide() {
		return {
			'tabs': this
		};
    },
	props: {
		type: {
			type: String,
			default: 'info',
		},
		title: {
			type: String,
			default: '',
		},
		closable: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			tabpanes: [],
			tabpanesCount: 0,
			actived: 'first',
		}
	},
	methods: {
		handleClick(item) {
			this.actived = item.name;
			this.$emit('tab-click', this.actived);
		},
	},
	computed: {
		typeClass() {
			return `bh-alert-${ this.type }`;
		},
	},
}
</script>
